<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    const obj = {
      // 实现可迭代协议
      // 这个 Symbol.iterator 是内置的常量，可以直接使用
      // 添加中括号的目的是这是一个属性名表达式
      // [Symbol.iterator]最终会把这个Symbol.iterator解析成一个名字
      [Symbol.iterator]() {
        // 实现迭代器协议
        // 使用Generator的方式自己实现
        // ------------- 使用Generator -------------
        function* foodGenerator() {
          yield '西兰花'
          yield '花菜'
          yield '西兰花炒蛋'
        }
        // 现在这个food中就有next方法了，并且可以调用三次next方法
        const food = foodGenerator()
        return food
      }
    }

    for (let iterator of obj) {
      console.log("iterator:", iterator);
    }

    const obj2 = {
      // 实现可迭代协议
      [Symbol.iterator]() {
        let arr = ["北京", "上海", "广州", "深圳"];
        let index = 0;

        return {
          next() {
            if (index < arr.length) {
              return { value: arr[index++], done: false }
            }

            // 迭代结束
            // 这个value返回或者是不返回都是可以的
            return { value: undefined, done: true }
          }
        }
      }
    }
    for (let iterator of obj2) {
      console.log("iterator2:", iterator);
    }
  </script>
</body>

</html>